<!DOCTYPE html>
<html>
<head>
	<title>vue实例</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="./js/vue.js"></script>
	<style type="text/css">
		.one {
			color:red;
		}
	</style>
</head>
<body>
	<div id="app">




		<div v-if="show"> <!-- 实际上如果show为false,则浏览器不会把这一块渲染出来，在文档结构不会看到这一部分的内容 -->
			hello world	
		</div>
		<div v-else>bye world</div>
		<!-- v-if与v-else要连着写，中间不能有其他元素隔着 -->




		<div v-show = "show" data-test = "show">my way </div><!-- 而用v-show则不同，它是把内容渲染了，但隐藏起来了，相当于设置为display:none,在文档结构是占有位置的 -->

		<div v-if="show_input">
			用户名：<input type="text" name="user" class="load" key="one1">
		</div>
		<div v-else>
			密码：<input type="text" name="pass" class="load1" key="one2">
		</div>

		<!-- vue实际上用条件渲染时，会尽量复用dom结构中相同的元素，如上面两个input框，若改变show_input时，仅是文字改变，而input框以及里面的内容却不会变。    为了解决这个问题，给每个input元素加上一个key值，这就说明了每个input是独一无二的，记住，只有key可以加以区别， 如name,class这些却不能。 -->




		
	
	</div>

</body>
<script type="text/javascript">

	var vm = new Vue({
		el:"#app",
		data:{
			show:false,
			show_input:true
		},

		methods:{
			handle:function() {
				
			}
		}
		

	})



		
</script>
</html>